<template>
    <div>
        <select-user ref="selectUser" :visible.sync="selectUserVisible" :appendToBody="true"
                     :multipleSelect="false"
                     :selectUserType="selectUserType"
                     @selectUserFinished="selectUserFinished"></select-user>

        <el-dialog
            title="选择相关人员"
            :visible.sync="innervisible"
            :modal-append-to-body="false"
            :modal="false"
            width="30%">
                <el-row align="left">
                    <el-col :span="8" align="left">
                        <autoCompleteUserName 
                        @handleSelect="autoCompleteUserNameSelect"
                        ></autoCompleteUserName>
                    </el-col>
                    <el-col :span="1" align="left">
                        <i class="el-icon-plus el-icon--left" style="cursor:pointer" @click="doSelectCcTo"></i>
                    </el-col>
                    <el-col :span="13" align="left">
                        <el-tag v-for="tag in ccToVos" :key="tag.userId" effect="plain"
                                style="margin-left: 5px">{{tag.userName}}
                        </el-tag>
                    </el-col>
                </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmSelectPeople()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import autoCompleteUserName from '@/components/select/autoCompleteUserName'
import SelectUser from '@/components/select/SelectUser'
export default {
    components: {autoCompleteUserName,SelectUser},
    data(){
        return{
            selectUserType: '',
            selectUserVisible:false,
            ccToVos: [],
        }
    },
    props:['visible'],
    computed:{
        innervisible:{
            get(){
                return this.visible
            },
            set(val){
                this.$emit('update:visible',val)
            }
        }
    },

    methods:{
        selectUserFinished(selectData,data = null) {
                if (!selectData || selectData.length == 0) {
                    Message.error('请先选择用户')
                    return
                }
                this.pushCcToVos([selectData])
        },
        pushCcToVos(data){
               this.ccToVos = []
               data.forEach(ele => {
                   if(this.ccToVos.every(item => {
                        return item.account!=ele.account
                   })){
                       this.ccToVos.push(ele)
                   }
               })
        },
        autoCompleteUserNameSelect(selection){
            // account: "SDT14619"
            // realName: "汤林超"
            // userId: "SDT14619"
            // userName: "汤林超"
            // value: "汤林超SDT14619"
            this.pushCcToVos([selection])
        },
        doSelectCcTo() {
                this.selectUserVisible = true
                this.selectUserType = 'selectCcTo'
                if (this.$refs.selectUser.treeData.length == 0) {
                    this.$refs.selectUser.getTreeData()
                }
        },
        confirmSelectPeople(){
            this.$emit('done',this.ccToVos)
            this.innervisible = false
        }
    }
}
</script>